<template>
    <div>
        <!-- 遮罩阻止点击别的按钮 -->
        <div v-if="visible" class="custom-dialog-big-background">
            <!-- 自定义弹窗 -->
            <div class="custom-dialog">
                <div class="dialog-backdrop" @click="closeDialog"></div>
                <!-- 点击背景关闭弹窗 -->

                <div class="dialog-container">
                    <div class="dialog-header">
                        <!-- 弹窗标题插槽或默认标题 -->
                        <slot name="header">
                            <h3 class="dialog-title">{{ title }}</h3>
                            <!-- 默认标题 -->
                        </slot>
                        <!-- 右上关闭按钮 -->
                        <div class="buttons">
                            <img src="../assets/img/module5/dialog/guanbi.png" @click="closeDialog" alt="关闭"
                                class="button-icon" />
                        </div>
                    </div>

                    <div class="dialog-content">
                        <div class="contentWapper">
                            <span class="dialogText">发布对象</span>
                            <el-select v-model="localSelectUser" size="medium" multiple filterable placeholder="选择用户"
                                @change="handleChange">
                                <el-option v-for="(user, index) in users" :key="index" :label="user.publishingUser"
                                    :value="user.publishingUser">
                                </el-option>
                            </el-select>


                            <!-- <select v-model="selectUser">
                            <option class="selectUser" value="">选择用户</option>
                            <option v-for="(user, index) in users" :key="index" :value="user.id">
                                {{ user.name }}
                            </option>
                        </select>
                        <img src="../assets/img/module5/dialog/iconPlus.png" alt="图片加载失败" class="plusIcon"> -->
                        </div>
                        <div class="buttonWapper">
                            <button class="diaButton" @click="cancelDia">取消</button>
                            <button class="diaButton" @click="confirmDia">确定</button>
                        </div>
                    </div>

                    <div class="dialog-footer">
                        <img src="../assets/img/module5/dialog/dialogicon3.png" class="img-foot" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

const baseApi = process.env.NODE_ENV === 'production'
    //? process.env.VUE_APP_REMOTE_API
  ? '/api'  // 使用代理路径
    : process.env.VUE_APP_REMOTE_API_MODULE2;

export default {
    props: {

        users: {
            type: Array,
            default: () => [
                { id: "1", publishingUser: '用户1' },
                { id: "2", publishingUser: '用户2' },
                { id: "3", publishingUser: '用户3' } // 示例用户列表
            ]
        },
        proid: {
            required: true,
        },

        visible: {
            type: Boolean,
            required: true,
        },
        title: {
            type: String,
            default: "空域使用说明20240823", // 弹窗默认标题
        },
        closeButtonText: {
            type: String,
            default: "关闭", // 关闭按钮默认文本
        },
    },

    data() {
        return {
            // localSelectUser: this.selectUser, // 初始化为传入的值
            localSelectUser: [],
        };
    },

    watch: {
        visible(newValue) {
            if (newValue) {
                this.localSelectUser = []; // 在弹窗显示时初始化 
            }
        }
    },

    methods: {
        closeDialog() {
            this.$emit("update:visible", false); // 通知父组件关闭弹窗
        },

        handleChange(value) {
            // console.log("多选更新",value);
            // console.log("多选更新",this.localSelectUser);

        },

        cancelDia() {

            // console.log("取消被点击了");
            this.$emit("update:visible", false); // 通知父组件关闭弹窗
        },

        confirmDia() {
            // console.log("确定被点击了");
            if (this.localSelectUser.length != 0) {
                this.localSelectUser.forEach(
                    User => {
                        console.log(User);
                        this.ReleaseData(User);
                    })
                this.$emit("refreshHistory"); // 刷新历史用户数据
                this.$emit("update:visible", false); // 通知父组件关闭弹窗
            }

        },

        // 发布数据
        async ReleaseData(username) {
            try {
                // const response = await axios.post('http://47.99.75.194:8082/module2/PubRecord', null,
                //   {
                //     params:
                //     {
                //       instructionId: this.proid,
                //       userName: username,

                //     },
                //   }
                // );
                const response = await axios.post(`${baseApi}/airspaceUtilization/PubRecord`, null, {
                    params: {
                        instructionId: this.proid,
                        userName: username,
                    },
                });
                if (response.data.code === 0) {
                    console.log('用户发布信息成功');
                }
            } catch (error) {
                console.error('用户发布信息失败', error);
            }
        },

    },
};
</script>

<style scoped>
.custom-dialog-big-background {
    /* position: fixed;
    top:0%;
    left:0%;
    width: 40%;
    height: 60%;
    background-color: transparent;
    z-index:4000; */

}

/* 弹窗背景 */
.custom-dialog {
    position: fixed;
    top: 50%;
    left: 55%;
    width: 25vw;
    height: 30vh;
    transform: translate(-50%, -50%);
    /* 精确居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}


/* 弹窗容器 */
.dialog-container {
    position: relative;
    width: 100%;
    /* 弹窗宽度 */
    height: 100%;
    background-image: url("../assets/img/module5/dialog/container.png");
    /* 背景图片 */
    background-size: cover;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* 阴影效果 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 弹窗顶部标题和按钮 */
.dialog-header {
    display: flex;
    width: 100%;
    height: 10%;
    justify-content: center;
    align-items: center;
    position: relative;
    background-image: url("../assets/img/module5/dialog/headbar.png"), url("../assets/img/module5/dialog/dialogtopimg1.png"), url("../assets/img/module5/dialog/dialogtopimg2.png");
    background-position: center, center, center;
    background-size: cover, auto, cover;
    background-repeat: no-repeat, no-repeat, no-repeat;
}

.dialog-title {
    display: flex;
    font-size: 1.5rem;
    color: #ffffff;
    text-align: center;
    margin: 0;
}

/*右上角关闭按钮*/
.buttons {
    position: absolute;
    right: 2%;
}

.button-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* 弹窗内容区 */
.dialog-content {
    width: 100%;
    height: 80%;
    display: flex;
    flex-wrap: wrap;
    /**允许内容换行*/
    align-content: flex-end;
    justify-content: center;
}

.contentWapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20%;
    gap: 1%;
}

.dialogText {
    font-size: 0.93vw;
    font-family: AlibabaPuHuiTi_2_65_Medium;
    color: #749fbf;
    text-align: center;
    margin-right: 2%;
}

select {
    border: 2px solid #1d405c;
    color: #ffffff;
    font-size: 16px;
    border-radius: 4px;
    padding-left: 1%;
    width: 10vw;
    height: 4vh;
    background-color: #0d141b;

}

.selectUser {
    color: #ffffff;
    background-color: #0d141b;

}

.plusIcon {
    height: 40%;
    margin-left: 1%;
}

.buttonWapper {
    display: flex;
    width: 100%;
    height: 10%;
    flex-flow: row;
    margin-top: 20%;
    margin-left: 29%;
    gap: 10%;
    /* background-color: white; */
}

.diaButton {
    height: 30px;
    width: 90px;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 18px;
    text-align: center;
    background-color: transparent;
    background-image: url('../assets/img/module2/button-tijiao.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.diaButton:hover {
    background-color: rgba(255, 255, 255, 0.1);
    /* 悬停时的背景颜色 */
    transform: scale(1.05);
    /* 悬停时轻微放大 */
    cursor: pointer;
    /* 悬停时显示手型光标 */
}

/* 弹窗底部 */
.dialog-footer {
    display: flex;
    height: 10%;
    width: 100%;
    /* justify-content: flex-end; */
    position: relative;
}

/*右下角标识*/
.img-foot {
    position: absolute;
    right: 2%;
}

/*
.contentWapper /deep/ .el-select{
    border: 2px solid #1d405c;
    color: #ffffff;
    background-color: #0d141b;
}*/

/*选择用户输入框颜色*/

.contentWapper /deep/ .el-input--medium .el-input__inner {
    border: 2px solid #1d405c;
    color: #ffffff;
    background-color: #0d141b;
}

.contentWapper /deep/ .el-select-dropdown {
    border: none;
    background: #0d141b;
    z-index: 4001;
}

.contentWapper /deep/ .el-select-dropdown__item {
    background-color: transparent;
    color: #fff;
    z-index: 4001;
}

.contentWapper /deep/ .el-tag.el-tag--info {
    border: none;
    background-color: #1d405c;
    color: #fff;
}
</style>
